<!--
 * @Description: 该页面功能已经废弃，此页面内容仅做留存以备查询。其他页面相似功能将移除。-- Taoist
-->
<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="u-skeleton">
			<view class="box">
				<view class="box1">
					<view class="img">
						<image :src="yaoDetail.dr_img" mode=""></image>
					</view>
					<view class="info">
						<view class="name">
							{{yaoDetail.dr_name}}
							{{yaoDetail.dr_model}}
						</view>
						<view class="gongsi">
							{{yaoDetail.dr_brand}}
						</view>
						<view class="price">
							¥{{yaoDetail.dr_price}}
						</view>
					</view>
				</view>
				<view class="kong"></view>
				<view class="box2">
					<view class="shuliang-box">
						<view class="left">
							<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png" mode=""></image>
							<text>购买数量（盒）</text>
						</view>
						<view class="right">
							<image @click="jianNum" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jian.png" mode=""></image>
							<text>{{goumaiNum}}</text>
							<image @click="jiaNum" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jia.png" mode=""></image>
						</view>
					</view>
					<view class="yongfa-box">
						<view class="left">
							<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png" mode=""></image>
							<text>药品用法</text>
						</view>
						<view class="right">
							<input type="number" v-model.trim="Num1" placeholder="请输入数量" placeholder-style="color: #C7C3C3;font-size: 24rpx;" /><view class="wenben" @click="meiri">次/每<text v-if="riNum==1">日</text ><text v-if="riNum==2">周</text><text v-if="riNum==3">月</text></view><image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jiantou.png" mode=""></image>
						</view>
					</view>
					<view class="yongliang-box">
						<view class="left">
							<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png" mode=""></image>
							<text>单次用量</text>
						</view>
						<view class="right">
							<input type="digit" v-model.trim="Num2" placeholder="请输入数量" placeholder-style="color: #C7C3C3;font-size: 24rpx;" /><view class="wenben" @click="ci"><text v-if="pianNum==1">片</text><text v-if="pianNum==2">包</text><text v-if="pianNum==3">瓶</text>/次</view><image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jiantou.png" mode=""></image>
						</view>
					</view>
					<view class="banfa-box">
						<view class="left">
							<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png" mode=""></image>
							<text>使用办法</text>
						</view>
						<view class="right">
							<view class="wenben" @click="xuanze"><text v-if="neiNum==1">内服</text><text v-if="neiNum==2">外用</text><text v-if="neiNum==3">注射</text></view><image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jiantou.png" mode=""></image>
						</view>
					</view>
					<view class="beizhu-box">
						<view class="title">
							备注
						</view>
						<textarea v-model.trim="beizhu" placeholder="请输入药品的备注说明" placeholder-style="font-size: 26rpx;color: #959595;" />
					</view>
				</view>
			</view>

			<u-mask :show="show1" :z-index="999">
				<view class="rizhouyue">
					<view class="item" >
						<view class="left">每日</view>
						<view class="right" @click="riTab(1)">
							<image v-if="riNum==1" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="left">每周</view>
						<view class="right" @click="riTab(2)">
							<image v-if="riNum==2" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="left">每月</view>
						<view class="right" @click="riTab(3)">
							<image v-if="riNum==3" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
				</view>
			</u-mask>

			<u-mask :show="show2" @click="show2 = false" :z-index="999">
				<view class="rizhouyue">
					<view class="item" >
						<view class="left">片</view>
						<view class="right" @click="pianTab(1)">
							<image v-if="pianNum==1" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="left">包</view>
						<view class="right" @click="pianTab(2)">
							<image v-if="pianNum==2" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="left">瓶</view>
						<view class="right" @click="pianTab(3)">
							<image v-if="pianNum==3" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
				</view>
			</u-mask>

			<u-mask :show="show3" @click="show3 = false" :z-index="999">
				<view class="rizhouyue" >
					<view class="item" >
						<view class="left">内服</view>
						<view class="right" @click="neiTab(1)">
							<image v-if="neiNum==1" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="left">外用</view>
						<view class="right" @click="neiTab(2)">
							<image v-if="neiNum==2" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="left">注射</view>
						<view class="right" @click="neiTab(3)">
							<image v-if="neiNum==3" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
							<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
						</view>
					</view>
				</view>
			</u-mask>

			<view class="btn-box">
				<view class="btn" @click="shiyong">使用</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '编辑用量',
				goumaiNum:1,
				
				show1: false,
				riNum:1,
				show2:false,
				pianNum:1,
				show3:false,
				neiNum:1,
				Num1:"",
				Num2:"",
				beizhu:"",
				loading: true,
				
				yaoId:"",
				yaoDetail:"",
				
				leixing:1, // 传进来的类型  1是添加 2修改
				cengNum:2, // 返回跳转的层数
			}
		},
		onLoad(options) {
			that=this
			that.yaoId=options.yaoId
			that.leixing=options.leixing?options.leixing:1
			that.cengNum=options.cengNum
			console.log(that.$store.state.yaoList,77777);
			that.postData(that.yaoId)
		},
		methods: {
			jianNum(){
				if(that.goumaiNum==1){
					return
				}
				that.goumaiNum--
			},
			jiaNum(){
				that.goumaiNum++
			},
			meiri(){
				that.show1=true
			},
			ci(){
				that.show2=true
			},
			xuanze(){
				that.show3=true
			},
			riTab(num){
				that.riNum=num
				that.show1=false
			},
			pianTab(num){
				that.pianNum=num
				that.show2=false
			},
			neiTab(num){
				that.neiNum=num
				that.show3=false
			},
			postData(yaoId){
				that.$postAjax1('Doctorsside_drugs_info',{
					drugs_id:yaoId,
				},function(data){  //https://ask.suoweilai.com/Doctorsside_drugs_info  医生端-药品 - 医生端-医生药品详情
					that.yaoDetail=data.data.data
					that.loading = false;
					// console.log(data.data.data,99999999999)
				})
			},
			shiyong(){
				if(that.Num1==""){
					uni.showToast({
						icon:"none",
						title:"药品用法不能为空!"
					})
					return
				}
				if(that.Num2==""){
					uni.showToast({
						icon:"none",
						title:"单次用量不能为空!"
					})
					return
				}
				var datas = [{
					yaoId:that.yaoId,
					yaoname:that.yaoDetail.dr_name,
					xinghao:that.yaoDetail.dr_model,
					goumaiNum:that.goumaiNum,
					Num1:that.Num1,
					Num2:that.Num2,
					riNum:that.riNum,
					pianNum:that.pianNum,
					neiNum:that.neiNum,
					beizhu:that.beizhu,
				}]
				if(that.leixing==1){
					for(var i=0;i<that.$store.state.yaoList.length;i++){
						if(that.$store.state.yaoList[i].yaoId==that.yaoId){
							uni.showToast({
								icon:"none",
								title:"处方里有当前药品,不能重复添加!"
							})
							return
						}
					}
					that.$store.state.yaoList=that.$store.state.yaoList.concat(datas)
					console.log(that.$store.state.yaoList)
				}
				if(that.leixing==2){
					for(var i=0;i<that.$store.state.yaoList.length;i++){
						if(that.$store.state.yaoList[i].yaoId==that.yaoId){
							that.$store.state.yaoList.splice(i,1,datas[0])
						}
					}
				}
				// const value = JSON.parse(uni.getStorageSync('yaoList'));
				// uni.setStorageSync('yaoList', JSON.stringify(datas.concat(value)));
				console.log(that.$store.state.yaoList,88888)
				uni.navigateBack({
				    delta: parseInt(that.cengNum)
				});
				// this.$nextTick(() => {
				// });
			}
			
		}
	}
</script>

<style scoped lang="scss">
.box1{
	padding: 20rpx 32rpx;
	display:flex;
	.img{
		image{
			display: block;
			width: 120rpx;
			height: 132rpx;
		}
		margin-right: 12rpx;
	}
	.info{
		.name{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 14rpx;
		}
		.gongsi{
			font-size: 24rpx;
			font-weight: 400;
			color: #939499;
			line-height: 30rpx;
			margin-bottom: 14rpx;
		}
		.price{
			font-size: 28rpx;
			font-weight: 400;
			color: #DC1B31;
			line-height: 26rpx;
		}
	}
}
.kong{
	width: 100%;
	height: 12rpx;
	background: #F6F6F6;
}
.box2{
	.shuliang-box{
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid rgba(0,0,0,0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			image{
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				vertical-align: middle;
			}
		}
		.right{
			image{
				display: inline-block;
				width: 56rpx;
				height: 56rpx;
				vertical-align: middle;
			}
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #343434;
				line-height: 40rpx;
				padding: 0 30rpx;
				vertical-align: middle;
			}
		}
	}
	.yongfa-box,.yongliang-box,.banfa-box{
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid rgba(0,0,0,0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			image{
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				vertical-align: middle;
			}
		}
		.right{
			input{
				width: 160rpx;
				height: 42rpx;
				border-radius: 4rpx;
				border: 2rpx solid rgba(0,0,0,0.08);
				padding-left: 18rpx;
				box-sizing: border-box;
				vertical-align: middle;
				display: inline-block;
				
				font-size: 24rpx;
				font-weight: 400;
				color: #333;
			}
			.wenben{
				display: inline-block;
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
				padding: 0 6rpx 0 12rpx ;
				vertical-align: middle;
			}
			image{
				display: inline-block;
				width: 14rpx;
				height: 20rpx;
				vertical-align: middle;
			}
		}
	}

	.beizhu-box{
		padding: 0 32rpx;
		.title{
			padding: 28rpx 0 20rpx 24rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}
		textarea{
			width: 100%;
			box-sizing: border-box;
			height: 224rpx;
			border-radius: 12rpx;
			border: 2rpx solid #F6F6F6;
			font-size: 26rpx;
			font-weight: 400;
			padding: 24rpx 28rpx;
			line-height: 36rpx;
			color: #333;
		}
		
	}
}
.rizhouyue{
	width: 376rpx;
	height: 284rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	position: absolute;
	top: 418rpx;
	left: 212rpx;
	// z-index: 9999;
	.item{
		padding: 26rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid rgba(0,0,0,0.08);
		&:nth-last-of-type(1){
			border: none;
		}
		.left{
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			vertical-align: middle;
		}
		.right{
			image{
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
				vertical-align: middle;
			}
		}
	}
}

.btn-box{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 32rpx 100rpx;
	.btn{
		width: 100%;
		height: 98rpx;
		background: linear-gradient(219deg, #FF9331 0%, #FE7600 100%);
		border-radius: 8rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
	}
}
</style>


